var category = [
  {
    name: "累计完成",
    value: 612.5,
  },
  {
    name: "标准进度",
    value: 548.7,
  },
  {
    name: "上月完成率",
    value: 300.2,
  },
  {
    name: "本月完成率",
    value: 300,
  },
]; // 类别
var total = 1000; // 数据总数
var datas = [];
category.forEach((value) => {
  datas.push(value.value);
});
option = {
  backgroundColor: "#071347",
  xAxis: {
    max: total,
    splitLine: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  grid: {
    left: 250,
    top: 100, // 设置条形图的边距
    right: 250,
    bottom: 100,
  },
  yAxis: [
    {
      type: "category",
      inverse: false,
      data: category,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
  ],
  series: [
    {
      // 内
      type: "bar",
      barWidth: 28,
      silent: true,
      itemStyle: {
        normal: {
          color: "#1588D1",
        },
      },
      label: {
        normal: {
          formatter: "{b}",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          position: "left",
          distance: 20, // 向右偏移位置
          show: true,
        },
      },
      data: category,
      z: 1,
      animationEasing: "elasticOut",
    },

    {
      // 分隔
      type: "pictorialBar",
      itemStyle: {
        normal: {
          color: "#07314a",
        },
      },
      symbolRepeat: "fixed",
      symbolMargin: 2,
      symbol: "rect",
      symbolClip: true,
      symbolSize: [3, 28],
      symbolPosition: "start",
      symbolOffset: [3, -4],
      symbolBoundingData: this.total,
      data: [total, total, total, total],
      z: 2,
      animationEasing: "elasticOut",
    },
    {
      // label
      type: "pictorialBar",
      symbolBoundingData: total,
      itemStyle: {
        normal: {
          color: "none",
        },
      },
      label: {
        normal: {
          formatter: (params) => {
            var text;
            text = "{f| " + ((params.data * 100) / total).toFixed(2) + "%}";
            return text;
          },
          rich: {
            f: {
              color: "#ffffff",
            },
          },
          position: "right",
          distance: 10, // 向右偏移位置
          show: true,
        },
      },
      data: datas,
      z: 0,
    },

    {
      name: "外框",
      type: "bar",
      barGap: "-130%", // 设置外框粗细
      data: [total, total, total, total],
      barWidth: 45,
      itemStyle: {
        normal: {
          barBorderRadius: [5, 5, 5, 5],
          color: "transparent", // 填充色
          barBorderColor: "#1588D1", // 边框色
          barBorderWidth: 3, // 边框宽度
        },
      },
      z: 0,
    },
    {
      type: "scatter",
      name: "条形",
      symbol: "roundRect",
      symbolSize: [7, 20],
      symbolOffset: [3, -5],
      symbolKeepAspect: true,
      itemStyle: {
        normal: {
          color: "#1588D1",
        },
      },
      data: [total, total, total, total],
    },
  ],
};
